<template>
  <div id="shiftLogList" class="mainContent">
    <div class="timeBox clearfix">
      <vue-datepicker-local v-model="emptyTime" clearable class="pull-left" />
      <div class="select" v-clickoutside="handleClose">
        <p :class="{'up' : isShowShift}" @click="showShift">{{shift}}</p>
        <ul :class="['link-list',{'show': isShowShift}]">
          <li v-for="(item,index) in tab" :key="item.value"
              @click="changeShift($event)">
            {{item.label}}
          </li>
        </ul>
      </div>
      <div class="pull-left" style="margin-left:30px;height:34px;line-height:34px;" @click="selectAll">
        <label for="selectAll" style="font-weight:normal;font-size:13px;">全选</label>
        <input id="selectAll" type="checkbox" v-model="select" value="All" style="margin-left:4px;"/>
      </div>
      <button @click="btnPrint">打印</button>
      <button @click="addHandover" style="margin-right:20px;" :class="{noaddHandover : isaddHandover}">新增</button>
    </div>
    <div class="list-link clearfix" v-if="shiftLogList.length">
      <div v-for="(item,index) in shiftLogList" class="handOverBox">
        <img src="./../../../../static/images/shiftlog.png" width="80" alt="Alternate Text" @click="change($event)" :data-shiftlogid="item.PATIENT_SHIFTLOG_ID" :data-index="index" />

        <div class="sign-icon">
          <div class="ill-te">
            <input type="checkbox" :id="'PatientName'+index" v-model="msg" :value="item.PATIENT_SHIFTLOG_ID">
            <label :for="'PatientName'+index" class="score">{{item.PATIENT_NAME}}({{item.BED_NO}})</label>
          </div>
        </div>
      </div>
    </div>
    
    <loading v-if="shiftLogList.length == 0 && isShow "></loading>
    <noSearch v-if="shiftLogList.length == 0 && !isShow "> </noSearch>
  </div>
</template>
<script>
  import loading from '@/components/loading/loading'
  import noSearch from '@/components/search/noSearch' //导入没有搜索结果组件
  import {standardDate } from "@/components/common/date"; //引入时间转换JS
  import VueDatepickerLocal from '@/components/datepicker/VueDatepickerLocal'
  import { apiGetPatientShiftLogsByDate, apiAddShiftLog } from '@/api/api' //引入交班日志接口
  import axios from 'axios';
  import Bus from "@/components/common/bus"; //引入公共媒介JS BUS
export default {
    data() {
      return {
        shiftLogList: [],
        src: '',
        ind: 0,
        isShow: true,
        icuName: JSON.parse(sessionStorage.getItem('user')).Content, //登录用户的科室
        msg: [], //存储复选框的值
        select: true,
        emptyTime:'',
        dateTime: '',
        shiftType: 1,
        isShowShift: false,
        shift: 'A 班',
        tab: [
          { label: 'A 班', value: 1 },
          { label: 'P 班', value: 2 },
          { label: 'N 班', value: 3 }
        ],
        isSelsctShow: true,
        selectList: [],
        isaddHandover:false, //标识增加按钮是否可以点击
      }
    },
    watch: {
      icuName: {
        handler(curVal, oldVal) { //监听登陆人的科室有没改变，如果改变就执行下面的方法
           //console.log(curVal)  //新值
          this.shiftLogList = [];
          this.isShow = true;
          this.GetPatientShiftLogsByDate();
        }
      },
      dateTime: {
        handler(curVal, oldVal) {
          if (this.dateTime == '') {
            //console.log(curVal)  //新值
            this.shiftLogList = [];
            //this.datatime = "2019-02-19";
            this.dateTime = standardDate(new Date(new Date() - 24 * 60 * 60 * 1000));
            this.isShow = true;
            this.GetPatientShiftLogsByDate();
          } else {
            this.shiftLogList = [];
            this.isShow = true;
            this.GetPatientShiftLogsByDate();
          }
        }
      },
      msg: {
        handler(curVal, oldVal) {
          //console.log(curVal.length)
          if (curVal.length == 0) {
            this.select = false;
            this.isSelsctShow = false;
          } else if (curVal.length == this.selectList.length) {
            this.select = true;
            this.isSelsctShow = true;
          } else {
            this.select = false;
            this.isSelsctShow = true;
          }
        }
      },
      shift: {
        handler(curVal, oldVal) {
          //console.log(curVal == 'A 班')  //新值
          //this.$store.state.stateData.status = 2;
          if (this.shift == 'A 班') {
            this.shiftType = 1;
            this.shiftLogList = [];
            this.GetPatientShiftLogsByDate();
          } else if (this.shift == 'P 班') {
            this.shiftType = 2;
            this.shiftLogList = [];
            this.GetPatientShiftLogsByDate();
          } else if (this.shift == 'N 班') {
            this.shiftType = 3;
            this.shiftLogList = [];
            this.GetPatientShiftLogsByDate();
          }
        }
      },
    },
    created() {
      //console.log(this.$store.state.stateData.status)
      this.src = axios.defaults.baseURL;
      if (this.$route.params.date != undefined) {
        this.dateTime = this.$route.params.date;
        this.emptyTime = this.$route.params.date;
      } else {
        this.dateTime = standardDate(new Date(new Date() - 24 * 60 * 60 * 1000));
        this.emptyTime = standardDate(new Date(new Date() - 24 * 60 * 60 * 1000));
        //console.log(standardDate(new Date(new Date() - 24*60*60*1000)))
      }
      if (this.$store.state.stateData.status == 1) {
        if (this.$route.params.type == 1) {
          this.shiftType = 1
        } else if (this.$route.params.type == 2) {
          this.shiftType = 2
        } else if (this.$route.params.type == 3) {
          this.shiftType = 3
        }
      }
    },
    mounted() {
          this.GetPatientShiftLogsByDate();
     
      //console.log(this.$route.query.status == 1)
     
      Bus.$on("timePicker", e => {
        this.dateTime = e.trim();
      });
      Bus.$on("Content", e => {
        this.icuName = e.trim();
        // 　　　　　console.log(`传来的数据是：${e}`)
      });
    },
    methods: {
      selectAll() {
        this.select = !this.select;
        this.isSelsctShow = false;
        //console.log(this.select)
        if (this.select) {
          for (let ind in this.selectList) {   //让复选框默认选中
            this.msg[ind] = this.selectList[ind];
          }
          //console.log(this.msg)
          //console.log(this.selectList)
        } else if (!this.select && !this.isSelsctShow) {
          this.msg = [];
        }
      },
      showShift() {
        this.isShowShift = !this.isShowShift;
      },
      changeShift(event) {
        this.isShowShift = false;
        this.$store.state.stateData.status = 2;
        this.select = true;
        if ($.trim(event.currentTarget.innerHTML) != this.shift) {  // 当选择的值跟当前的值不一样时
          this.shift = $.trim(event.currentTarget.innerHTML);  //赋值 
        }
      },
      change(e) {
        let id = e.currentTarget.getAttribute("data-shiftlogid");
        let index = e.currentTarget.getAttribute("data-index");
        this.$store.state.patientName = this.shiftLogList[index].PATIENT_NAME;
        this.$store.state.stateData.ID_PAT_IN = this.shiftLogList[index].PATIENT_ID;
        //console.log(this.$store.state.patientName)
        //console.log(this.$store.state.stateData.ID_PAT_IN)
        this.$router.push({
          name: 'patientShiftLogEdit',
          query: { status: 1, item: 3, id: id, type: this.shiftType, date: this.dateTime, msg: this.msg},
        })
      },
      addHandover() {  //新增
        if (!this.isaddHandover) {
          this.$toast.center('正在新增中，请稍后重新查看！！……');
          this.shiftLogList = [];
          this.isShow = true;
          apiAddShiftLog({
            shiftType: this.shiftType,
            date: this.dateTime,
            icuName: this.icuName
          })
            .then(res => {
             this.isaddHandover = true;
             this.GetPatientShiftLogsByDate();
             this.isaddHandover = false;

            })
            .catch(err => {
              this.isShow = false;
              this.$toast.center('当前数据有问题，请联系管理员');
            })
        } else {
          this.$toast.center('当前数据正在更新，请勿重复点击');
        }
      },
      handleClose() {
        this.isShowShift = false;
      },
      btnPrint() {  //批量打印
        if (this.msg.length == 0) {
          this.$toast.center('当前未选择日志，请选择之后再打印……');
        } else {
          let ids = "";
          for (let item of this.msg) {
            ids += item + ','
          }
          //console.log(ids)
          let str = this.src + '/Report/ReportViewer?reportName=PatientShiftLogReport.frx&patientIds=' + ids + '&date=' + this.dateTime + '&type=2';
          //console.log(str)
          this.$router.push({
            path: '/patientShiftLogPrint',
            query: { http: str, item: 3, status: 1, type: this.shiftType, date: this.dateTime, msg: this.msg}
          })
        }
      },
      GetPatientShiftLogsByDate() {
        if (this.$store.state.stateData.status == 1) {
          if (this.$route.params.type == 1) {
            this.shift = 'A 班'
          } else if (this.$route.params.type == 2) {
            this.shift = 'P 班'
          } else if (this.$route.params.type == 3) {
            this.shift = 'N 班'
          }
        }
        apiGetPatientShiftLogsByDate({
          archiveDate: this.dateTime,
          shiftType: this.shiftType,
          ORG_NAME: this.icuName
        })
          .then(res => {
            if (res == '[]') {
              this.isShow = false;
              this.shiftLogList = [];
            } else {
              this.isShow = true;
              //let arr = [];
              this.shiftLogList = JSON.parse(res);
              //console.log(JSON.parse(res))
              if (this.$store.state.stateData.status == 1) {
                this.msg = this.$route.params.msg;
                //console.log(this.msg);
                for (let ind in this.shiftLogList) {   //让复选框默认选中
                  this.selectList[ind] = this.shiftLogList[ind].PATIENT_SHIFTLOG_ID;
                }
              } else {
                for (let ind in this.shiftLogList) {   //让复选框默认选中
                  this.msg[ind] = this.shiftLogList[ind].PATIENT_SHIFTLOG_ID;
                  this.selectList[ind] = this.shiftLogList[ind].PATIENT_SHIFTLOG_ID;
                }
              }
             
              //console.log(JSON.parse(res))
              //console.log(this.shiftLogList)
            }
            
          })
          .catch(err => {
            this.$toast.center('当前请求有问题，请联系管理员！');
          })
      },
      filterTime(time) {
        if (!time) {
          return time;
        } else {
          return time.replace('T', '  ').substring(0, 10);
        }
      }

    },
    components: {
      VueDatepickerLocal,
      loading,
      noSearch
    }
}
</script>
<style scoped>
  #shiftLogList {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 15px;
  }

  .list-link {
    width: 100%;
    height: calc(100vh - 200px);
    overflow-y: auto;
  }
  .timeBox button.noaddHandover {
    background-color: #ccc;
    color: #fff;
  }
  .handOverBox {
    float: left;
    width: 140px;
    margin-left: 15px;
    margin-bottom: 45px;
    text-align: center;
  }

    .handOverBox > div {
      display: flex;
      margin-top: 10px;
      justify-content: center;
      align-items: center;
    }
  label.score{
  vertical-align:middle;
  font-weight:normal;
  }
  .timeBox {
    padding-left: 46px;
    padding-bottom: 20px;
    padding-right: 50px;
  }
    .timeBox button {
      padding: 7px 15px;
      background-color: #11a7f3;
      color: #fff;
      float:right;
    }
  .select {
    float:left;
    margin-left:50px;
    width: 100px;
    height: 34px;
    line-height: 34px;
    background: #fff;
    padding-left: 10px;
    border: 1px solid #e5e5e5;
  }

    .select p {
      color: #000;
      position: relative;
    }

      .select p:after {
        display: inline-block;
        content: '';
        width: 10px;
        height: 10px;
        background-image: url("../../../../static/images/unfold_arron.png");
        background-repeat: no-repeat;
        background-size: contain;
        vertical-align: middle;
        margin-right: 10px;
        margin-top: 12px;
        float: right;
      }

      .select p.up:after {
        background-image: url("../../../../static/images/up_arron.png");
      }

  .link-list {
    position: relative;
    z-index: 9999;
    display: none;
    border: 1px solid #eee;
    left: -10px;
    width: 100px;
    background-color: #fff;
    box-shadow: 2px 5px 5px #ccc;
  }

    .link-list li {
      text-align: center;
      cursor: pointer;
    }

      .link-list li:hover {
        background-color: #f6f6f6;
        border-bottom: 1px solid #ccc;
      }
</style>
